<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户登录界面</title>
        <style>
            html, body, #login-form-container{
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
                font-family: "黑体" "楷体" "宋体";
            }

            html,body{
                background: linear-gradient(180deg, lightblue, rgb(69, 69, 205));
            }

            #login-form-container{
                padding: 10px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

            #form-container{
                width: 300px;
                height: 200px;
                background-color: #fff;
                padding: 20px;
                border: 1px solid lightblue;
                border-radius: 20px;
                box-shadow: 0px 0px 10px blue;
            }
            form{
                font-size: 14px;
            }
            form label{
                display: inline-block;
                width: 80px;
                text-align: right;
                margin-right: 10px;
            }
            form>div{
                margin: 10px 0;
            }

            form button{
                margin-left: 100px;
                margin-top: 10px;
                width: 100px;
                height: 40px;
            }
            [type=text],[type=password]{
                padding: 5px;
            }
            h3{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="login-form-container">
            <div id="form-container">
                <h3>用户登录</h3>
                <form onsubmit="return login(this)">
                    <div>
                        <label for="">账号</label>
                        <input type="text" name="uname">
                    </div>
                    <div>
                        <label for="">口令</label>
                        <input type="password" name="upwd">
                    </div>
                    <div>
                        <button>登录</button>
                    </div>
                </form>
            </div>
        </div>
        
        <script>
            function login(_form){
                // 1. 验证数据的合法性(自己写)
                // 2. 发起post的ajax请求
                let req_data = { name: _form.uname.value, pwd: _form.upwd.value };
                fetch("/cgi-bin/login", {
                    method: "POST",
                    body: JSON.stringify(req_data),
                    headers: {
                        "content-type": "application/json;charset=utf-8"
                    }
                }).then(resp=>resp.json()).then(data=>{
                    // 登录成功 {code: 0, user: {id: 1, nickname: "老牛", head: "/images/head.jpg"}}
                    // 登录失败 {code: 1, msg: "口令错误或账号不存在!"}
                    console.log(data);
                    if(data.code == 0){
                        // 保存user对象的数据
                        localStorage.uid = data.user.id;
                        localStorage.nickname = data.user.nickname;
                        localStorage.head = data.user.head;

                        // 打开主页
                        location.href = "/"
                    }else{
                        _form.reset();
                        alert(data.msg);
                    }
                })

                return false;
            }
        </script>
    </body>
</html>